<template>
   <!-- 查看详情页 -->
   <div class="dashboard-container">
      <div class="app-container">
         <el-card>
            <el-tabs>
               <el-tab-pane label="登录账户设置">
                  <el-form
                     label-width="120px"
                     style="margin-left: 120px; margin-top:30px"
                     :model="userInfo"
                     :rules="rules"
                     ref="userForm"
                  >
                     <el-form-item label="用户名" prop="username">
                        <el-input
                           style="width: 300px"
                           v-model="userInfo.username"
                        ></el-input>
                     </el-form-item>
                     <el-form-item label="密码" prop="password2">
                        <el-input
                           style="width: 300px"
                           type="password"
                           v-model="userInfo.password2"
                        ></el-input>
                     </el-form-item>
                     <el-form-item>
                        <el-button type="primary" @click="saveUser">
                           保存
                        </el-button>
                     </el-form-item>
                  </el-form>
               </el-tab-pane>
               <el-tab-pane label="个人详情">
                  <el-row type="flex" justify="end">
                     <el-tooltip content="打印个人基本信息">
                        <router-link
                           :to="`/employees/print/${userId}?type=personal`"
                        >
                           <i class="el-icon-printer" />
                        </router-link>
                     </el-tooltip>
                  </el-row>
                  <!-- <UserInfo></UserInfo> -->
                  <!-- vuejs 中 内置一个组件， component 可以是任何组件 -->
                  <!-- 动态组件：可以切换组件 : 例： -->
                  <!-- <el-button
                     type="primary"
                     @click="UserComponent = 'el-button'"
                  ></el-button>
                  <el-button
                     type="primary"
                     @click="UserComponent = 'user-info'"
                  ></el-button> -->
                  <component :is="UserComponent" />
               </el-tab-pane>
               <el-tab-pane label="岗位信息">
                  <el-row type="flex" justify="end">
                     <el-tooltip content="打印岗位信息">
                        <router-link
                           :to="`/employees/print/${userId}?type=job`"
                        >
                           <i class="el-icon-printer" />
                        </router-link>
                     </el-tooltip>
                  </el-row>
                  <!-- <JobInfo></JobInfo> -->
                  <component :is="JobComponent" />
               </el-tab-pane>
            </el-tabs>
         </el-card>
      </div>
   </div>
</template>

<script>
import { getUserDetailById } from '../../api/user'
import { saveUserDetailById } from '../../api/employees'
import UserInfo from './components/user-info.vue'
import JobInfo from './components/job-info.vue'
export default {
   components: {
      UserInfo,
      JobInfo
   },
   data() {
      return {
         UserComponent: 'UserInfo',
         JobComponent: 'JobInfo',
         // 直接将路由的参数赋值给 data 属性
         userId: this.$route.params.id,
         userInfo: {
            username: '',
            // 因为如果是读取出来的 password 是密文,先设置为 password2 保存时在给password
            password2: ''
         },
         rules: {
            username: [
               { required: true, message: '姓名不能为空', trigger: 'blur' }
            ],
            password2: [
               {
                  required: true,
                  message: '密码不能为空',
                  trigger: 'blur'
               },
               {
                  min: 6,
                  max: 9,
                  message: '密码长度6-9位',
                  trigger: 'blur'
               }
            ]
         }
      }
   },
   created() {
      // 获取用户信息
      this.getUserDetailById()
   },
   methods: {
      // 获取用户信息
      async getUserDetailById() {
         const result = await getUserDetailById(this.userId)
         this.userInfo = result
      },
      // 保存
      saveUser() {
         // 调用方法时，校验一下
         this.$refs.userForm.validate().then(async () => {
            await saveUserDetailById({
               ...this.userInfo,
               password: this.userInfo.password2
            })
            this.$message.success('修改用户信息成功')
         })
      }
   }
}
</script>

<style></style>
